<template>
  <com-paging>
    <view class="container">
      <view class="theme">
        <view v-for="item in Theme.themeList" @click="Theme.setTheme(item)">
          {{ item }}
        </view>
        <view @click="toPage('/pages/test/index')">去test页面</view>
        <view @click="toPage('/pages/test-select/index')">去test-select页面</view>
        <view @click="toPage('/pages/test-input/index')">去test-input页面</view>
        <view @click="setLanguage('zh-Hans')">设置中文</view>
        <view @click="setLanguage('en')">设置英文</view>
      </view>
      <view class="progress">
        <view class="jian" @click="state.progress -= 10">减</view>
        <com-progress :current="state.progress" :total="513" :precision="2" :striped="true"
          :striped-flow="true"></com-progress>
        <view class="jia" @click="state.progress += 10">加</view>
      </view>
      <view class="checkboxs">
        <com-checkbox v-model="state.checkbox" :button-props="{ type: 'primary' }">唱</com-checkbox>
        <com-checkbox v-model="state.checkbox" :button-props="{ type: 'info' }">跳</com-checkbox>
        <com-checkbox v-model="state.checkbox" :button-props="{ type: 'success' }">RAP</com-checkbox>
        <com-checkbox v-model="state.checkbox" :button-props="{ type: 'warning' }">篮球</com-checkbox>
        <com-checkbox v-model="state.checkbox" :button-props="{ type: 'danger' }">篮球</com-checkbox>
        <com-checkbox v-model="state.checkbox" :disabled="true">篮球</com-checkbox>
      </view>
      <view class="buttons">
        <com-button @click="state.popupVisible = !state.popupVisible">
          <com-font text="你好a"></com-font>
        </com-button>
        <com-button type="info" @click="testConfirmPopup">
          <com-font text="你好b"></com-font>
        </com-button>
        <com-button type="success" @click="testChooseImage">
          <com-font text="你好c"></com-font>
        </com-button>
        <com-button type="warning" @click="config.addXTab()">
          <com-font text="横向tab添加项"></com-font>
        </com-button>
        <com-button type="danger" @click="config.addYTab()">
          <com-font text="纵向tab添加项"></com-font>
        </com-button>
        <com-button type="danger" :loading="true">
          <com-font text="你好d"></com-font>
        </com-button>
        <com-button type="primary" class="is-link">
          <com-font text="你好e"></com-font>
        </com-button>
        <com-button type="info" class="is-link">
          <com-font text="你好f"></com-font>
        </com-button>
        <com-button type="success" class="is-link">
          <com-font text="你好g"></com-font>
        </com-button>
        <com-button type="warning" class="is-link">
          <com-font text="你好h"></com-font>
        </com-button>
        <com-button type="danger" class="is-link">
          <com-font text="你好i"></com-font>
        </com-button>
        <com-button :loading="true" type="danger" class="is-link">
          <com-font text="你好j"></com-font>
        </com-button>
      </view>
      <view class="tabs">
        <com-tab v-for="item in tabList" v-model="state.tab[item.name]" :="item.props">
          <com-tab-item v-for="o in item.items" :="o"></com-tab-item>
        </com-tab>
      </view>
      <view class="switchs">
        <com-switch v-for="item in swtichList" v-model="state.switch[item.name]" :="item.props"></com-switch>
      </view>
      <view class="popups">
        <com-popup v-model="state.popupVisible" position="center" title="对话"
          :btns="[{ text: '确认', props: { type: 'warning' } }]"></com-popup>
        <com-confirm-popup ref="confirmPopupRefRef"></com-confirm-popup>
        <com-choose-image ref="chooseImageRef"></com-choose-image>
      </view>
    </view>
  </com-paging>
</template>

<script setup lang="ts">
import { awaitSetTimeout, toPage } from '@/utils'
import { reactive, ref } from 'vue'
import { ChooseImageNS, ConfirmPopupNS, TabNS, TabItemNS, SwitchNS } from '@/components'
import { Theme } from '@/utils/theme'
import { setLanguage } from '@/locale'

const tabList = reactive<{ name: string, props: TabNS.Props, items: TabItemNS.Props[] }[]>([
  {
    name: 'a',
    props: {},
    items: Array.from({ length: 4 }).map((item, i) => {
      return {
        disabled: i === 3,
        value: i,
        label: '基本' + i
      }
    })
  },
  {
    name: 'b',
    props: { direction: 'y', valueKey: 'id' },
    items: Array.from({ length: 5 }).map((item, i) => {
      const label = '对象' + i
      return {
        disabled: i === 3,
        label,
        value: { id: i, label }
      }
    })
  },
])
const swtichList = reactive(<{ name: string, props: SwitchNS.Props }[]>[
  { name: 'a', props: { disabled: true } },
  {
    name: 'b', props: {
      inactive: { text: '我是关' },
      active: { text: '我是开', icon: 'icon-select' },
      async beforeChange() {
        swtichList[1].props.loading = true
        await awaitSetTimeout(3000)
        swtichList[1].props.loading = false
      }
    }
  },
  {
    name: 'c', props: {
      inactive: { text: '我是关', actionIcon: 'icon-copy' },
      active: { text: '我是开', icon: 'icon-select' },
      inlinePrompt: true,
      async beforeChange() {
        swtichList[2].props.loading = true
        await awaitSetTimeout(3000)
        swtichList[2].props.loading = false
        return Promise.reject()
      }
    }
  },
  {
    name: 'd', props: {
      inactive: { text: '关闭内容', actionIcon: 'icon-close-eye' },
      active: { text: '完整开启内容', actionIcon: 'icon-open-eye' },
      inlinePrompt: true,
    }
  },
  {
    name: 'e', props: {
      inactive: { text: '关闭内容', actionIcon: 'icon-close-eye' },
      active: { text: '完整开启内容', actionIcon: 'icon-open-eye' },
      inlinePrompt: true,
      style: { width: '100rpx' }
    }
  },
])
const state = reactive({
  checkbox: false,
  progress: 150,
  popupVisible: false,
  tab: tabList.reduce((p, c) => {
    p[c.name] = c.items[0].value
    return p
  }, <Record<string, TabItemNS.Props['value']>>{}),
  switch: Object()
})
const confirmPopupRefRef = ref<ConfirmPopupNS.Instance>()
const chooseImageRef = ref<ChooseImageNS.Instance>()
const config = {
  addXTab() {
    const r = 5
    const i = tabList[0].items.length
    tabList[0].items.push({
      disabled: Math.floor(Math.random() * r) > r - 2,
      value: i,
      label: '基本' + i
    })
  },
  addYTab() {
    const r = 5
    const i = tabList[1].items.length
    const label = '对象' + i
    tabList[1].items.push({
      disabled: Math.floor(Math.random() * r) > r - 2,
      value: { id: i, label },
      label
    })
  }
}

function testConfirmPopup() {
  confirmPopupRefRef.value?.openPopup({
    title: '这是标题',
    prompt: '这是提示语',
    confirmBtn: {
      handle: done => awaitSetTimeout(3000),
    },
    cancelBtn: {
      show: false,
    },
  })
}

function testChooseImage() {
  chooseImageRef.value?.openPopup({ uploadCount: 3 })
}
</script>

<style scoped lang="scss" src="./index.scss"></style>